/*
 * @Author: your name
 * @Date: 2021-05-17 08:11:38
 * @LastEditTime: 2021-05-17 08:54:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \api\lib\pages\apis\gest\gest_home_page.dart
 */
import 'package:flutter/material.dart';

class GridViewHomePage extends StatefulWidget {
  @override
  _GridViewHomePageState createState() => _GridViewHomePageState();
}

class _GridViewHomePageState extends State<GridViewHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('gridview')),

      // 使用组件方式引用
      // body: GridView(
      //   // 内边距
      //   padding: EdgeInsets.all(10),
      //   // 回弹效果
      //   physics: BouncingScrollPhysics(),
      //   // 是否可滑动 false false不可滑动 true 可滑动
      //   primary: true,
      //   // 是否包裹内容
      //   shrinkWrap: false,
      //   // 滑动方向 horizontal 水平方向 vertical 竖直方向
      //   scrollDirection: Axis.vertical,
      //   // SliverGridDelegateWithMaxCrossAxisExtent 不固定列数 控制宽度
      //   // SliverGridDelegateWithFixedCrossAxisCount 固定列数 控制列数
      //   gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      //     // 次方向的数量控制
      //     crossAxisCount: 3,
      //     // maxCrossAxisExtent: 400,
      //     // 主方向的间隔
      //     mainAxisSpacing: 10,
      //     // 次方向的间隔
      //     crossAxisSpacing: 10,
      //     // 宽高比
      //     childAspectRatio: 1,
      //   ),
      //   children: [
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //   ],
      // ),

      // 使用构造方法引入
      // body: GridView.count(
      //   padding: EdgeInsets.all(10),
      //   // 次方向的数量控制
      //   crossAxisCount: 4,
      //   // maxCrossAxisExtent: 400,
      //   // 主方向的间隔
      //   mainAxisSpacing: 10,
      //   // 次方向的间隔
      //   crossAxisSpacing: 10,
      //   // 宽高比
      //   childAspectRatio: 1,
      //   children: [
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //   ],
      // ),

      // body: GridView.extent(
      //   padding: EdgeInsets.all(10),
      //   // 次方向的数量控制

      //   maxCrossAxisExtent: 400,
      //   // 主方向的间隔
      //   mainAxisSpacing: 10,
      //   // 次方向的间隔
      //   crossAxisSpacing: 10,
      //   // 宽高比
      //   childAspectRatio: 1,
      //   children: [
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //     Container(color: Colors.blue),
      //   ],
      // ),

      // body: GridView.builder(
      //   gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      //     // 次方向的数量控制
      //     crossAxisCount: 3,
      //     // maxCrossAxisExtent: 400,
      //     // 主方向的间隔
      //     mainAxisSpacing: 10,
      //     // 次方向的间隔
      //     crossAxisSpacing: 10,
      //     // 宽高比
      //     childAspectRatio: 1,
      //   ),
      //   itemBuilder: (BuildContext context, num index) {
      //     if (index == 0) {
      //       return Container(
      //           color: Colors.blue, child: Text('gridview $index'));
      //     }
      //     return Container(color: Colors.grey, child: Text('gridview $index'));
      //   },
      // ),

      body: GridView.custom(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          // 次方向的数量控制
          crossAxisCount: 3,
          // maxCrossAxisExtent: 400,
          // 主方向的间隔
          mainAxisSpacing: 10,
          // 次方向的间隔
          crossAxisSpacing: 10,
          // 宽高比
          childAspectRatio: 1,
        ),
        childrenDelegate:
            SliverChildBuilderDelegate((BuildContext context, num index) {
          return Container(color: Colors.blue, child: Text('gridview $index'));
        }, childCount: 10),
      ),
    );
  }
}
